<template>
    <el-form label-width="80px">
        <el-form-item label="选择标签">
            <el-select
                clearable
                style="width: 100%"
                v-model="tagIds"
                multiple
                filterable
                size="small"
                collapse-tags
                @change="handleTagSetChange"
                placeholder="请选择标签"
            >
                <el-option
                    v-for="item in tagsOption"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
            </el-select>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    props: {
        currentRow: {
            type: Object,
            default: () => {},
        },
        tagSetVisible: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            tagIds: [], //选中设备ids
            tagsOption:[],
        };
    },

    watch: {
        currentRow: {
            handler(val) {},
            immediate: true,
            deep: true,
        },
        tagSetVisible: {
           async handler(val) {
                if (!val) {
                    this.tagIds = [];
                } else {
                    if (this.currentRow.tags) {
                        this.tagIds = this.currentRow.tags.map((item) => {
                            return item.id;
                        });
                    }
                    this.tagsOption = await this.$store.dispatch("operator/generatorTags");
                }
            },
            immediate: true,
        },
    },
    methods: {
        handleTagSetChange(e) {
            this.$emit("handleTagSetChange", e);
        },
    },
};
</script>

<style lang="scss" scoped></style>
